<template>
    <van-nav-bar title="春雨医生" left-text="" left-arrow @click="onClickLeft" />
    <div class="container">
       <div class="title">
        <h3 style=" margin-left: 25px;margin-top: 10px;" >
         拯救手腕痛“鼠标手”
        </h3>
       </div>

       <div class="top">
        <p><img src="../../../public/healhtool/st.png" alt=""><span class="number">4225</span><span class="popu">人已完成</span></p>
        <p class="order">订阅通知</p>

       </div>
       <div class="tiao" @click="Toindex">
         <p>8天健康养成计划</p> <span>进入计划目录></span>
       </div>
       <div class="hj">
        <!-- 缓解颈椎 -->
        <div class="jz">
            <span>拯救手腕痛“鼠标手”</span>
          
        </div>
        <div class="zj">
            拯救手腕痛“鼠标手”,这样练完太舒服啦
        </div>
         <div class="video">
           <video src="../../../public/healhtool/黄霄雲 - 星辰大海(2022河南卫视“青春万岁”五四青年节特别节目).mkv" controls autoplay  class="video1"></video>
         </div>
          
     
       </div>
       <div class="finish1">
        <div class="finish" sticky>
            点击完成
           </div>
           </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const list=ref<any>([]);
const slicedData=ref(list.value.slice(1, 20));
console.log(slicedData.value);
const onClickLeft = () => history.back();
const getList=async()=>{
    await axios.get('')
}
</script>

<style scoped lang="scss">
.container{
    width: 100%;
    height: 100%;
    background: #fff;
    .title{
        width: 100%;
        height: 70px;
        h3{
       line-height: 80px;
        }
    }
    .top{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-left: 20px;
        img{
            width: 90px;
             height: 30px;

        }
        .number{
            width: 45px;
            display: inline-block;
            height: 20px;
           
            position: absolute;
            margin-left: 8px;
           top: 5px;
            color:#1cc86b ;
        }
        .popu{
            margin-left: 45px;
          position: absolute;
          top: 3px;
         color: #c3c3c3;
        }
        .order{
            width: 80px;
            height: 25px;
            font-size: 14px;
            text-align: center;
            line-height: 25px;
            color: #c3c3c3;
            border-radius: 25px;
            margin-right: 30px;
          border: 1px solid #c3c3c3;
        }
    }
    .tiao{
        width: 90%;
        height: 50px;
        background:#f4f6f7;
        margin-left: 20px;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        p{
            margin-left: 10px;
        }
        span{
            margin-right: 15px;
            color: #6c6c6c;
        }
    }
    .hj{
        width: 100%;
        height: 380px;
        margin-top: 20px;
     
        .jz{
           width: 92%;
       
           height: 40px;
           background:linear-gradient(to right,#0eba89,#22cc5c);
           line-height: 40px;
           color: #fff;
           margin-left: 20px;
           border-radius: 10px 10px 0 0;
           span{
            margin-left: 10px;
           }
      
        }
        .zj{
            margin-left: 20px;
            margin-top: 10px;
            color: #c3c3c3;
            
        }
          .video{
          width: 90%;
          height: 300px;
          
        
              video{
                width: 90%;
                height: 270px;
              
             margin-left: 20px;
            }
          }
         
        }
        .finish1{
            width: 100%;
            height: 60px;
             
             .finish{
            width: 85%;
            height: 40px;
            background:#1cc86b;
            line-height: 40px;
            margin-left: 15px;
            margin-top: 10px;
            text-align: center;
            color: #fff;
            font-weight: 850;
            position: fixed;
            bottom: 0;
            margin-bottom: 30px;
         }
        }
     
    }

</style>